

<template>
  <div class="app-container" >
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-input v-model="queryParams.search"  placeholder="请输入收款方名称/收款方ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input  v-model="queryParams.searchType" placeholder="请输入提现单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.withdrawStatus"
          placeholder="请选择提现状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button  icon="el-icon-search" size="mini"  type="primary" @click="getWithdrawRecordList">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button  icon="el-icon-search" size="mini"  >批量通过</el-button>
        <el-button icon="el-icon-refresh" size="mini" >批量拒绝</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
        width="55">
      </el-table-column>
      <el-table-column
        prop="targetId"
        label="收账方ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="收账方名称">
      </el-table-column>
      <el-table-column
        prop="status"
        label="收账方状态">
        <template slot-scope="scope">
          <span>{{scope.row.status|changeUserType}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="withdrawNo"
        label="提现单号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="提现申请时间">
      </el-table-column>
      <el-table-column
        prop="withdrawMoney"
        label="提现金额">
      </el-table-column>
      <el-table-column
        label="提现方式">
        <template slot-scope="scope">
          <span>{{scope.row.withdrawType|changeWithdrawType}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="提现状态">
        <template slot-scope="scope">
          <span>{{scope.row.withdrawStatus|changeWithdrawStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cxyy"
        label=" 操作人">
      </el-table-column>
      <el-table-column
        prop="cxyy"
        label=" 操作时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="scope.row.withdrawStatus != 0"
            @click="audit(scope.row.id,1)"
            size="small">
            通过
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.withdrawStatus != 0"
            @click="audit(scope.row.id,2)"
            size="small">
            拒绝
          </el-button>
          <el-button
            type="text"
            @click="showOrderList(scope.row.id)"
            size="small">
            查看订单
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getWithdrawRecordList"
        @current-change="getWithdrawRecordList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <withdrawal-dialog :dialogTableVisible="dialogTableVisible" :orderList="orderList" />
  </div>
</template>

<script>
  import {  getWithdrawRecordList,audit,auditBatch,withdrawDetail} from '@/api/separateAccounts'
  import  withdrawalDialog from  "./components/withdrawal/withdrawalDialog"
  export default {
    name: "withdrawal",
    components: { withdrawalDialog },
    data() {
      return {
        statusOptions: [
          {index:0,name:"待审核"},
          {index:1,name:"通过"},
          {index:2,name:"拒绝"},
        ],
        dateTime:[],
        queryParams: {
          pageSize:10,
          pageNum:1
        },
        tableData: [],
        total:0,
        multipleSelection:[],
        dialogTableVisible:false,
        orderList:[]
      }
    },
    watch: {
      dateTime(val){
        if(val.length>0){
          this.queryParams.startTime=val[0]
          this.queryParams.endTime=val[1]
        }
      }
    },
    mounted() {
     this.getWithdrawRecordList()
    },
    methods: {
      checkSelectable(row){
        return row.withdrawStatus !=0
      },
      resetQuery(){
        this.queryParams= {
          pageSize:10,
          pageNum:1
        }
        this.dateTime=[]
        this.getRefundList()

      },
      getWithdrawRecordList(){
        getWithdrawRecordList(this.queryParams).then(res=>{
          if(res.code == 200){
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },
      audit(id,type){
        let msg =type ==1?"通过提现申请":"拒绝提现申请"
        this.$confirm(`此操作将${msg}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit({ id: id,withdrawStatus:type }).then(res => {
            if (res.code == 200) {
              this.getWithdrawRecordList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message(res.msg)
            }
          })
        }).catch(() => {

        })
      },
      auditBatch(type){
        if(this.multipleSelection.length == 0){
          this.$message("请选择提现申请")
          return false
        }
        let ids =[]
        this.multipleSelection.forEach(item=>{
          ids.push(item.id)
        })
        let msg =type ==1?"通过提现申请":"拒绝提现申请"
        this.$confirm(`此操作将${msg}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          auditBatch({ targetIds: ids.join(','),status:type }).then(res => {
            if (res.code == 200) {
              this.getWithdrawRecordList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.$message(res.msg)
            }
          })
        }).catch(() => {

        })
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      showOrderList(id){
        withdrawDetail({id:id}).then(res=>{
            if(res.code  == 200){
              this.orderList = res.data
              this.dialogTableVisible = true
            }
        })
      }
    }
  }
</script>

<style scoped>

</style>
